import { DemoBlock } from 'demos'
import { Button, Mask } from 'grace-design'
import React, { useState } from 'react'

export default () => {
  const [open, setOpen] = useState(false)
  const [visible, setVisible] = useState(false)
  const [turnon, setTurnon] = useState(false)

  return (
    <>
      <DemoBlock title="遮罩层">
        <Button
          onClick={() => {
            setOpen(true)
          }}
        >
          打开遮罩层
        </Button>
        <Mask
          open={open}
          onClose={() => {
            setOpen(false)
          }}
        />
      </DemoBlock>

      <DemoBlock title="有内容的遮罩层">
        <Button
          onClick={() => {
            setVisible(true)
          }}
        >
          打开遮罩层
        </Button>
        <Mask
          open={visible}
          onClose={() => {
            setVisible(false)
          }}
        >
          <div
            style={{
              background: '#fff',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              minHeight: '250px',
            }}
          >
            Mask
          </div>
        </Mask>
      </DemoBlock>

      <DemoBlock title="无法点击遮罩层关闭的遮罩层">
        <Button
          onClick={() => {
            setTurnon(true)
          }}
        >
          打开遮罩层
        </Button>
        <Mask
          open={turnon}
          onClose={() => {
            setTurnon(false)
          }}
          maskClosable={false}
        >
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Button
              onClick={() => {
                setTurnon(false)
              }}
            >
              关闭
            </Button>
          </div>
        </Mask>
      </DemoBlock>
    </>
  )
}
